<template>
  <div class="number-selector">
    <div class="selector-section">
      <h3>前区号码 (选择{{ config.front.count }}个)</h3>
      <div class="number-grid">
        <div v-for="num in frontNumbers" :key="num" class="number-ball"
          :class="{ selected: selectedFront.includes(num), disabled: isDisabled(num, 'front') }"
          @click="toggleSelection(num, 'front')">
          {{ num }}
        </div>
      </div>
    </div>

    <!-- 后区选择区域（仅当有后区时显示） -->
    <div v-if="hasBack" class="selector-section">
      <h3>后区号码 (选择{{ config.back.count }}个)</h3>
      <div class="number-grid">
        <div v-for="num in backNumbers" :key="num" class="number-ball"
          :class="{ selected: selectedBack.includes(num), disabled: isDisabled(num, 'back') }"
          @click="toggleSelection(num, 'back')">
          {{ num }}
        </div>
      </div>
    </div>

    <button class="start-matching"
      @click="$emit('startMatching', { front: selectedFront, back: hasBack ? selectedBack : [] })"
      :disabled="!isSelectionComplete">
      开始匹配
    </button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  config: {
    type: Object,
    required: true,
    default: () => ({
      hasBack: true, // 是否有后区
      front: {
        count: 6,
        max: 33
      },
      back: {
        count: 1,
        max: 16
      }
    })
  }
})

// 计算属性：判断是否有后区
const hasBack = computed(() => {
  return props.config.hasBack !== undefined ? props.config.hasBack : true
})

// 生成号码范围数组
const frontNumbers = ref(Array.from({ length: props.config.front.max }, (_, i) => i + 1))
const backNumbers = ref(Array.from({ length: props.config.back.max }, (_, i) => i + 1))

// 选中的号码
const selectedFront = ref([])
const selectedBack = ref([])

// 切换号码选择状态
const toggleSelection = (num, type) => {
  // 只有有后区时才处理后区选择
  if (type === 'back' && !hasBack.value) return;

  const selected = type === 'front' ? selectedFront : selectedBack
  const maxCount = type === 'front' ? props.config.front.count : props.config.back.count

  if (selected.includes(num)) {
    // 取消选择
    selected.value = selected.value.filter(n => n !== num)
  } else {
    // 新增选择（不超过最大数量）
    if (selected.value.length < maxCount) {
      selected.value = [...selected.value, num].sort((a, b) => a - b)
    }
  }
}

// 判断号码是否应禁用
const isDisabled = (num, type) => {
  // 只有有后区时才处理后区禁用判断
  if (type === 'back' && !hasBack.value) return true;

  const selected = type === 'front' ? selectedFront : selectedBack
  const maxCount = type === 'front' ? props.config.front.count : props.config.back.count

  return !selected.includes(num) && selected.value.length >= maxCount
}

// 判断是否已选够号码
const isSelectionComplete = computed(() => {
  // 前区必须选够
  const frontComplete = selectedFront.value.length === props.config.front.count;
  // 后区根据是否有后区来判断
  const backComplete = hasBack.value
    ? selectedBack.value.length === props.config.back.count
    : true;

  return frontComplete && backComplete;
})
</script>

<style scoped>
.selector-section {
  margin-bottom: 2rem;
}

.number-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.number-ball {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid #ddd;
}

.number-ball:not(.disabled):hover {
  transform: scale(1.1);
}

.number-ball.selected {
  background-color: #42b983;
  color: white;
  border-color: #42b983;
}

.number-ball.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.start-matching {
  padding: 0.8rem 2rem;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  margin-top: 1rem;
}

.start-matching:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>